<script setup>
import {reactive, toRef, toRefs} from "vue";

let data=reactive( {
  name:'zhangsan',
  age:18
})
/*将一个reactive响应式对象中的某个属性转换成一个ref响应式对象*/
let a= toRef(data,'name')
/* 将一个reactive响应式对象中的多个属性转换成多个ref响应式对象*/
 let {name,age}=toRefs(data)

let incr=()=>{
  data.age++
}
let decr=()=>{
  data.age--
}
function show(){
  //通过ref对象获取响应式数据
  alert(a.value)
  //通过reactive对象获取响应式数据
  alert(data.age)
}
</script>

<template>
<div>
  {{data.age}}
<button @click="incr">incr</button>
<button @click="decr">decr</button>
<button @click="show">show</button>
</div>
</template>

<style scoped>

</style>